Wesbos - reduce와 map 응용

---

[data-time]에 저장되어 있는 시간 값들의 총합을 구하여 비디오의 총 러닝타임을 구해보자

---

로직

1. const를 통해 사용할 요소 선언
2. map과 split을 통해 값 정제
3. reduce()를 통해 총합 구하기!
4. 시간들을 수학적 계산을 통해 알맞게 전환

---

---

const 선언부터…

💡 이번 챕터에선 간단하게 <li> 태그들만 선언 해줘도 된다.

// nodelist로 표현되긴 하지만, 실제 배열은 아니기 때문에 배열에 집어넣어줘야 함!

const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

console.log(timeNodes);

---

map과 split을 통해 시간값 정제

💡 우선… 원활한 계산을 위해 [분 : 초]의 형식에서 “:”을 제거해주고 정수화시켜줘야 될 것 같다.

dataset.time

🤔 태그 내에 [data-OOO]이 저장되어 있다면, dataset.OOO 을 통해 그 값을 불러올 수 있다.

const seconds = timeNodes
  // 노드들은 이제 data-time에 적힌 값이 됐음
  .map((node) => node.dataset.time)
  // 이것을 timeCode라고 하고, :을 기준으로 나눠서 왼쪽은 mins, 오른쪽은 secs로 할당
  .map((timeCode) => {
    // 정수화!!
    const [mins, secs] = timeCode.split(':').map(parseFloat);
    // mins는 분 형식이니까 초 값으로 만들려면 곱하기 60!
    return mins * 60 + secs;
  });

---

reduce를 사용하여 총합 구하기

.reduce((acc, current) => acc + current);

console.log(seconds);

---

계산 → “시 : 분 : 초”로 나타내기

💡 시 → 분 → 초 순서대로 계산을 해보자
한 시간은 3600초…

// secondsLeft를 활용해서 계속 남은 초를 계산
let secondsLeft = seconds;
const hours = Math.floor(seconds / 3600);
// 3600초로 나눈 나머지 = 남은 초
secondsLeft = secondsLeft % 3600;

const minutes = Math.floor(secondsLeft / 60);
// 60초로 나눈 나머지 = 남은 초
secondsLeft = secondsLeft % 60;

console.log(hours, minutes, secondsLeft);

---

최종 완성 코드

const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
const totalTime = document.querySelector('p');

const seconds = timeNodes
  .map((node) => node.dataset.time)
  .map((timeCode) => {
    const [mins, secs] = timeCode.split(':').map(parseFloat);
    return mins * 60 + secs;
  })
  .reduce((acc, current) => acc + current);

let secondsLeft = seconds;
const hours = Math.floor(seconds / 3600);
secondsLeft = secondsLeft % 3600;

const minutes = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60;

console.log(hours, minutes, secondsLeft);

totalTime.innerHTML = `<span>${hours}시간 ${minutes}분 ${secondsLeft}초</span>`;

---